
<template>
  <div>
    <el-dialog
      custom-class="page-designer-dialog"
      v-model="element.componentProps.visible"
      :close-on-click-modal="false"
      :title="element.componentProps.title"
      width="80%"
    >
      <div class="draggable-container dialog-body"  v-if="lowCode.isDesigner" @click.stop="dialogClick">
        <draggable
          :key="element.metaRefresh"
          class="drawing-board"
          v-model="element.items"
          @add="handleAdd($event)"
          v-bind="{ group: 'group', animation: 200 }"
          tag="div"
          item-key="key"
          handle=".mover"
          :component-data="{ name: 'fade' }"
        >
          <template #item="{ element: el, index }">
            <div>
              <renderParse
                :element="el"
                :key="el.key"
                :index="index"
                :parent="element"
              >
              </renderParse>
            </div>
          </template>
        </draggable>
      </div>

      <div class="dialog-body" v-else>
        <template tag="div" v-for="(el, index) in element.items" :key="index">
          <div v-if="element.key">
            <render-parse
              :element="el"
              :key="el.key"
              :index="index"
              :parent="element.items"
            >
            </render-parse>
          </div>
        </template>
      </div>

    </el-dialog>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, inject, toRefs, watch } from "vue";
import type { LowCodeImp, ComponentImp } from "@/components/low-code/core/type";
import { tools } from "@/components/low-code/page-designer/utils";
import clone from "clone";
import { useComponentPretreatment } from "@/components/low-code/page-designer/hooks";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "cardWidget",
  props: ["element"],
  setup(props) {
    /****
     *提供子组件判断是否在弹框容器下
     */
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;
    const { element } = toRefs(props);
    const component = lowCode.dataCenter[element.value.key] as ComponentImp;

    const handleAdd = (event: { newIndex: number }) => {
      let hasKey = false;
      const newIndex = event.newIndex;
      if (element.value.items[newIndex]) {
        /****
         * 组件预处理
         */
       if(useComponentPretreatment(lowCode, element.value, newIndex)) return false ;
        hasKey = element.value.items[newIndex].key ? true : false;
        let cacheObject = component.addItem(
          element.value.items[newIndex]
        ) as ComponentImp;
        cacheObject.nestedChain = element.value.nestedChain + "_dialog";
        element.value.items[newIndex] = cacheObject;
        lowCode.setcurrentKey(cacheObject.key);
      }
      hasKey && element.value.updateMetaRefresh();
      tools.handleStack.push(clone(lowCode));
    };

    watch(
      () => element.value.componentProps?.visible,
      (visible: boolean) => {
        if (!visible) {
          lowCode.disabled = false;
          element.value.componentProps.onHideEvents.map((code: any) => {
            lowCode.eventCenterController.fire(code);
          });
        } else {
          lowCode.disabled = true;
          element.value.componentProps.onShowEvents.map((code: any) => {
            lowCode.eventCenterController.fire(code);
          });
        }
      }
    );

    const dialogClick = () => {
      lowCode.currentKey = element.value.key;
    };

    return {
      lowCode,
      element,
      handleAdd,
      dialogClick,
    };
  },
});
</script>

<style  scoped>
.drawing-board {
  min-height: 320px;
}
</style>
<style>
.designer-middle .el-overlay {
  display: block;
  position: absolute;
  transform: scale(1);
}
.designer-middle .el-overlay-dialog {
  position: absolute;
}
</style>
